@use "../variables" as *;

// .svc-question__content {
//   .sd-table {
//     td:empty,
//     th:empty {
//       width: initial;
//     }
//   }
// }
.svc-matrix-cell {
  position: relative;
}

.svc-question__adorner {
  .sd-table .sd-table__cell--column-title {
    padding: 0 calcSize(1);

    .svc-matrix-cell {
      padding: calcSize(1.5) calcSize(1);
    }

    &.sd-table__cell--drag {
      padding-right: 0;
      padding-left: 0;
    }
  }
}

.svc-matrix-cell--selected {
  position: absolute;
  border-radius: var(--ctr-survey-matrix-cell-corner-radius, var(--lbr-corner-radius-x075));
  border: var(--ctr-survey-matrix-cell-border-width, var(--lbr-stroke-x2)) solid
    var(--ctr-survey-matrix-cell-border-color-selected, var(--sjs-secondary-background-500, #19b394ff));
  top: calcSize(0);
  left: calcSize(0);
  right: calcSize(0);
  bottom: calcSize(0);
  display: none;

  &.svc-visible {
    display: block;
    border: var(--ctr-survey-matrix-cell-border-width, var(--lbr-stroke-x2)) solid
      var(--ctr-survey-matrix-cell-border-color-selected, var(--sjs-secondary-background-500, #19b394ff));
  }
}

.svc-hovered > .svc-matrix-cell--selected:not(.svc-visible) {
  border: var(--ctr-survey-matrix-cell-border-width, var(--lbr-stroke-x2)) solid
    var(--ctr-survey-matrix-cell-border-color-hovered, var(--sjs-secondary-background-10, #19b3941a));
  display: block;
}

.svc-matrix-cell__question-controls {
  opacity: 0;
  position: absolute;
  top: calc(50% - 3 * #{$base-unit});
  left: calc(50% - 3 * #{$base-unit});
  z-index: 2;
  transition: opacity $creator-transition-duration;
}

.svc-matrix-cell__question-controls-button {
  border: var(--ctr-survey-contextual-button-border-width, var(--lbr-stroke-x1)) solid
    var(--ctr-survey-contextual-button-border-color, var(--sjs-border-25, #d4d4d4ff));
}

.svc-matrix-cell:hover .svc-matrix-cell__question-controls {
  opacity: 1;
}

.svc-question__content--in-popup {
  min-width: calcSize(70);
  padding: calcSize(5);
}

.svc-matrix-cell__popup {
  .sv-popup__scrolling-content {
    margin-top: calcSize(1);
    padding-top: 0;
  }

  .svc-question__content {
    @include disableUserSelect;
  }
}

.svc-question__content {
  .sd-table__cell--detail-panel {
    padding-left: calcSize(6);
  }
}

.svc-question__content {
  .sd-drag-element__svg {
    visibility: visible;
    cursor: initial;
    use {
      fill: (--ctr-data-table-row-drag-area-icon-color, var(--sjs-layer-1-foreground-50, #00000080));
    }
  }
}